/* 
  库存
 */
<template>
  <yd-layout>
    <!-- <yd-navbar slot="navbar" title="库存" bgcolor="#0a0a0a" color="#fff" /> -->
    <div @click="handleLogin" class="head-container">
      <div class="head">
        <!-- <yd-icon size="60px" name="ucenter"></yd-icon> -->
        <img :src="imgurl" style="border-radius:30px;display:block;width:60px;height:60px" alt="">
      </div>
      <div class="username">
        <span v-if="uid">{{username}}</span>
        <span v-else>未登录</span>
      </div>
      <div v-if="uid" class="info">
        <span>
          已登录：{{phone}}
        </span>
      </div>
      <div v-if="uid" @click.stop="handleLogout" class="logout-btn">
        退出登录
      </div>
      <form
        ref="logoutForm"
        style="display:none;"
        :action="logoutUrl"
        method="post"
      >
        <input type="hidden" name="type" value="0">
        <input type="hidden" name="uid" :value="uid">
      </form>
    </div>
    <div style="padding:5px 0 0;">
      <yd-cell-group>
        <yd-cell-item arrow type="a" @click.native.stop="handlePunch">
            <span slot="left">打卡</span>
        </yd-cell-item>
        <yd-cell-item arrow type="a" @click.native.stop="$router.push('/beautician/daily')">
            <span slot="left">日报</span>
        </yd-cell-item>
        <yd-cell-item arrow type="a" @click.native.stop="$router.push('/beautician/monthly')">
            <span slot="left">月报</span>
        </yd-cell-item>
      </yd-cell-group>
    </div>
    <home-tabbar slot="tabbar" selected="user"></home-tabbar>
  </yd-layout>
</template>
 
<script>
import pageMixin from "../../../mixins/page";
import HomeTabbar from "./home-tabbar";
import wx from "weixin-js-sdk";
import $ from "jquery";
export default {
  mixins: [pageMixin],
  components: {
    HomeTabbar,
  },
  data() {
    return {};
  },
  computed: {
    uid() {
      return this.$store.state.uid;
    },
    username() {
      return this.$store.state.username;
    },
    phone() {
      return this.$store.state.phone;
    },
    logoutUrl() {
      return g.ctx + "/login/loginout";
    },
    imgurl() {
      return this.$store.state.imgurl;
    },
  },
  methods: {
    async init() {
      this.indicator = true;
      //await this.loadData();
      this.indicator = false;
    },
    handleLogin() {
      if (uid) return;
      window.location.href = "";
    },
    async handlePunch() {
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: res => {
          try {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            this.$dialog.confirm({
              mes: "确认打卡？",
              opts: () => {
                $.ajax({
                  url: g.ctx + "/login/checkWork",
                  type: "post",
                  dataType: "JSON",
                  data: {
                    fid: this.$store.state.uid,
                    code: result,
                  },
                  success: data => {
                    this.$dialog.alert({
                      mes: data.message,
                    });
                  },
                  error: err => {
                    this.$dialog.alert({
                      mes: `打卡失败请重试`,
                    });
                  },
                });
              },
            });
          } catch (error) {
            alert(error);
          }
        },
      });
    },
    handleLogout() {
      this.$dialog.confirm({
        mes: "确认登出？",
        opts: () => {
          this.$refs["logoutForm"].submit();
        },
      });
    },
  },
  created() {
    this.init();
  },
};
</script>
 
<style lang="scss" scoped>
.head-container {
  background-color: #fff;
  padding: 15px 0;
  position: relative;
  color: #666;
  .username {
    text-align: center;
    margin: 0 0 10px;
  }
  .info {
    font-size: 12px;
    color: #999;
    text-align: center;
  }
  .logout-btn {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: #0099ff;
  }
}
.head {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  .yd-icon-ucenter {
    font-size: 60px;
    line-height: 1;
  }
}
</style>
 